<template>
    <div class="data-set">
        <div class="data-set-title">
            <h3>数据设置</h3>
        </div>
        <div class="data-set-concent" v-if="permissions['8'].type">
            <div class="data-set-focus">
                <div>关注航班配置：</div>
            </div>
            <div class="data-set-r">
                <div class="data-set-rT">
                    <div class="rTmin">本航季在飞航班</div>
                    <div class="rHandle">
                        <div id="setUp" v-if="opes"><span class="rHandle-icon1">&#xe661;</span>关注航班<span class="rHandle-icon2" @click="openSet">&#xe65a;</span></div>
                        <div id="setClera" v-if="!opes"><input type="checkbox" id="attentionAll" @click="attentionAll" :checked="checked">关注全部航班</div>
                    </div>
                </div>
                <div id="flightC">
                    <div class="flightC-line" v-for="(key,in1) in data">{{key.name}}
                        <p class="flightC-t">{{key.code}}</p>
                        <div class="data-set-box">
                            <div class="data-set-mol" :class="{dataGreens:(opes==true&&das.tag==true),dataSetMolG:(opes==!true&&das.tag!=true),dataGreensAll:(opes==!true&&das.tag==true)}"  v-for="(das,in2) in key.data" @click="changeSet(das,in1,in2)">
                                <div class="data-value">{{das.flight}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="paging">
                    <div id="fixed-page" v-if="len<5">
                        <div v-for="ked in len" :class="[ked==pagination?'move-page-w':'','move-page-z']" @click="changePage(ked)">{{ked}}</div>
                    </div>
                    <div id="move-page"  v-else>
                        <div id="move-page-left" @click="pagination_big(0)">&lt;</div>
                        <div class="move-page-box">
                            <!--move-page-w-->
                            <div v-for="va in lenSumper" :class="[va==pagination?'move-page-w':'','move-page-z']" @click="changePage(va)">{{va}}</div>
                        </div>
                        <div id="move-page-right" @click="pagination_big(1)">&gt;</div>
                    </div>
                </div>
                <div id="page-select" v-if="!opes">
                    <div id="page-select-t" @click="closeSet(1)">确定</div>
                    <div id="page-select-f" @click="closeSet(0)">取消</div>
                </div>
            </div>
        </div>
        <addLine></addLine>
    </div>
</template>
<script>
    import * as vx from 'vuex'
    import cityCode from './../../../JsonData/cityData'
    import airData from './../../../JsonData/airport'
    import addLine from './addLine.vue'
    export default{
        data(){
          return{
              historyData:'',
              temporary:'',
              pagination:1,
              opes:true,
              paginationBig:0,
              checked:false
          }
        },
        computed:{
            ...vx.mapGetters([
                    'permissions'
                ]
            ),
            lenSumper:function () {
                let arr=[];
                let arr1=[];
                for(let i=1;i<=this.len;i++){
                    arr1.push(i);
                    if(i%5==0){
                        arr.push(arr1);
                        arr1=[];
                        continue;
                    }else if(i==this.len){
                        arr.push(arr1);
                        arr1=[];
                    }
                }
                return arr[this.paginationBig]
            },
            data:function () {
                let arr=[];
                for(let i=0;i<4;i++){
                    if((this.pagination-1)*4+i<this.temporary.length){
                        arr.push(this.temporary[(this.pagination-1)*4+i])
                    }
                }
                return arr;
            },
            len:function () {
                if(Number.isInteger(Number(this.temporary.length)/4)){
                    return parseInt(this.temporary.length/4)
                }else {
                    return parseInt(this.temporary.length/4)+1
                }
            }
        },
        mounted () {
            this.getCurrentFltlist();
        },
        methods:{
            getCurrentFltlist:function(){
            $.ajax({
                type:'post',
                url : '/getCurrentSeasonFocusFlts',
                dataType : 'json',
                async:false,
                success : (data)=>{
                    var arr=[];
                    for(let key in data.map){
                        var name='';
                        var flightNumben=[];
                        let ks=key.split('=');
                        data.map[key].forEach((val)=>{
                            if(val.state==0){
                                flightNumben.push({flight:val.flightNumber,tag:false})
                            }else {
                                flightNumben.push({flight:val.flightNumber,tag:true})
                            }
                        });
                        ks.forEach((code)=>{
                            for(let val in airData){
                                airData[val].forEach((num)=>{
                                    if(num.code==code){
                                        name+=num.city+"=";
                                    }
                                })
                            };
                        });
                        if(name.charAt(name.length-1)=="="){
                            name = name.substr(0, name.length-1);
                        }
                        arr.push({
                            name:name,
                            code:key,
                            data:flightNumben
                        })
                    }
                    var storage=window.sessionStorage;
                    storage.setItem('atten',JSON.stringify(arr));
                    this.historyData=JSON.parse(JSON.stringify(arr));
                    this.temporary=JSON.parse(JSON.stringify(arr));
                    this.checked=data.focusFlag;
                }
            })
        },
            attentionAll:function(){
                this.checked=!this.checked;
                if(this.checked==true){
                    this.temporary.forEach((val)=>{
                        val.data.forEach((key)=>{
                            key.tag=true;
                        })
                    })
                }else if(this.checked==false){
                    this.temporary.forEach((val)=>{
                        val.data.forEach((key)=>{
                            key.tag=false;
                        })
                    })
                }
            },
            pagination_big:function (val) {
                if(val==0){
                    if(this.paginationBig>0){
                        this.paginationBig--;
                    }
                }else if(val==1){
                    if(this.lenSumper.length!=undefined&&this.lenSumper.length==5){
                        this.paginationBig++;
                    }

                }
            },
            openSet:function () {
                this.opes=false;
            },
            closeSet:function (val) {
                if(val==0){
                    let data=JSON.parse(JSON.stringify(this.historyData));
                    this.temporary=data;
                    var storage = window.sessionStorage;
                    var atten = eval(storage.getItem('atten'));
                    var flag = false;
                    outpoint:for(var i=0;i<atten.length;i++){
                        var obj = atten[i];
                        var list = obj["data"];
                        for(var j=0;j<list.length;j++){
                            var fltObj = list[j];
                            if(fltObj.tag=true){
                                flag=true;
                                break outpoint;
                            }
                        }
                    }
                    //从右边菜单进入
                    if(flag){
                        $('.labels-set').removeClass('labels-set');
                        $('.labels').each(function(){
                            var content=$(this).next().text();
                            if(content=='所有航班'){
                                $(this).addClass('labels-set');
                            }
                        });
                        //从仪表盘进入
                        if($('#focusFlights').is(':checked')){
                            $('#allFlights').attr('checked',true);
                        }
                    }
                }else if(val==1){
                    let data=JSON.parse(JSON.stringify(this.temporary));
                    let allData='';
                    var isFocusFlt = false;
                    data.forEach((val)=>{
                        allData+=val.code+":";
                        val.data.forEach((key)=>{
                           if(key.tag==true){
                               allData+=key.flight+','
                               isFocusFlt=true;
                           }
                        });
                        allData+=';'
                    });
                    if($('#focusFlights').is(':checked')){
                        if(!isFocusFlt){
                            alert('请至少关注一个航班号');
                            return;
                        }
                    }
                    $.ajax({
                        type:'post',
                        url:"/updateFocusFltList",
                        data:{
                            fltStr:allData
                        },
                        dataType:"json",
                        success:(data)=>{
                            if(data.opResult='0'){
                                $('.pla-ranking').css('display','none');
                                this.getCurrentFltlist();
                                $('.data-set-mol').each(function(){
                                    if($(this).attr('tag')==1){
                                        $(this).removeClass("data-set-green");
                                    }else{
                                        $(this).removeClass("data-set-green");
                                        $(this).find('span').removeClass('data-icon-green');
                                    }
                                });
                                $('.indicators-bth-t').click();
                                getAirportKPIData();
                            }else{
                                alert('修改失败');
                            }
                        }
                    });
                    this.historyData=data;
                }
                this.opes=true;
            },
            changePage:function (val) {
                this.pagination=val;
                $('.move-page-w').removeClass('move-page-w');
                event.currentTarget.setAttribute('class','move-page-z move-page-w');
            },
            changeSet:function (das,in1,in2) {
                if(this.opes!=true){
                    this.data[in1].data[in2].tag=!this.data[in1].data[in2].tag;
                }
            },
            focusFltClick:function(){

         }
        },
        components:{
            addLine:addLine
        }
    }
</script>
<style scoped>
    .dataSetMolG:hover{
        cursor: pointer;
        border:1px solid #2c416c;
    }
    .dataSetMolG:hover::before{
        color:#2c416c;
        cursor: pointer;
        content: '\E661';
        font-family: 'icon';
        position: absolute;
        top: 16px;
        left: 72px;
        font-size: 12px;
    }
    .dataGreensAll:before{
        cursor: pointer;
        color:#53b77b;
        content: '\E661';
        font-family: 'icon';
        position: absolute;
        top: 16px;
        left: 72px;
        font-size: 12px;
    }
    .dataGreensAll{
        border:1px solid #53b77b;
    }
    .dataGreens:before{
        color:#53b77b;
        cursor: pointer;
        content: '\E661';
        font-family: 'icon';
        position: absolute;
        top: 16px;
        left: 72px;
        font-size: 12px;
    }
    .dataGreens{
        border:1px solid transparent;
    }
    .flightC-line {
        font-size: 14px;
        width: 155px;
    }
    #page-select-t{
        background: -webkit-gradient(linear,0 0,0 100%,from(#62c5d8),to(#4b5cb6));
    }
    .move-page-w{
        background-color:white;
    }
</style>